import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'
Vue.use(VueRouter)
//component: ()=>import('../views/clothing.vue')函数可以实现异步加载，动态
//导出完整的路由表，但是需要根据权限筛选
export let authRoutes = [
  {
    path: '/clothing/:id',
    name: 'clothing',
    component: ()=>import('../views/clothing.vue'),
    children:[
      {
        path: 'men-wear',
        name: 'men-wear',
        component: ()=>import('../views/men-wear.vue'),
        children:[
          {
            path: 'shirt',
            name: 'shirt',
            component: ()=>import('../views/shirt.vue')
          }
        ]
      },
      {
        path: 'women-wear',
        name: 'women-wear',
        component: ()=>import('../views/women-wear.vue'),
        children:[
          {
            path: 'skirt',
            name: 'skirt',
            component: ()=>import('../views/skirt.vue')
          }
        ]
      }
    ]
  },
  {
    path: '/liquor/:id',
    name: 'liquor',
    component: ()=>import('../views/liquor.vue')
  },
  {
    path: '/medicine',
    name: 'medicine',
    component: ()=>import('../views/medicine.vue')
  }
]
const routes = [
  {
    path: '/',
    name: 'home',
    component: ()=>import('../views/Home.vue')
  },
  {
    path:'*',
    component:{
      render:h=>h('h1',{},'not found')
    }
  }
]
//通配符的路由放在最后。路由 { path: '*' } 通常用于客户端 404 错误。
//如果使用history模式，是不会生效的，hash模式才会生效
//cli内部集成了webpack插件：history-fallback，访问不到会跳回到首页
const router = new VueRouter({
  mode:'history',
  base:process.env.BASE_URL,
  routes
})


export default router
